<template>
  <div class="editor" >
    <div id="e">
    </div>
  </div>
</template>

<script>
  import E from "wangeditor"
  import hljs from 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.css'
  const OSS = require('ali-oss')
  
  export default {
    name: 'editor',
    data(){
      return{
        content:"",
        editor: null,
        info_:null
      }
    },
    model: {
      prop: 'desc',
      event:'change'
    },
    watch:{
      isClear(val){
        if (val){
          this.editor.txt.clear()
        }
      },
      desc(value) {
        if (value != this.editor.txt.html()) {
          this.editor.txt.html(this.desc)
        }
      }
    },
    props:{
      desc:{
        type:String,
        default:""
      },
 //业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
      isClear:{
        type:Boolean,
        default:false
      }
    },

    methods:{
      initE(){
        this.editor = new E('#e')
        this.editor.config.height = 400
        this.editor.config.onchangeTimeout = 1000 // 单位 ms
        // this.editor.config.uploadImgShowBase64 = true
        this.editor.config.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        this. editor.config.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          'table',  // 表格
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ]
        const client = new OSS({
        // // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
          region: 'oss-cn-beijing',
        // // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
          accessKeyId: 'LTAI5tBbon9x5r2zJaVvC83H',
          accessKeySecret: 'hVjCgQO88B3hnixqUg1JMyWxH6eitJ',
          bucket: 'xdblogimage',
        });
        this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
          // resultFiles 是 input 中选中的文件列表
          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
          var filename = (new Date()).getTime().toString()
          client.put(filename, resultFiles[0])
          .then(function (res) {
            // 上传图片，返回结果，将图片插入到编辑器中
             insertImgFn(res.url)
          }).catch(function (err) {
            console.log(err)
          })
        }
        this.editor.config.debug = false
        this.editor.highlight = hljs
        this.editor.create()
        }
    },
    mounted () {
      this.initE();
    }
  }
</script>

<style>
.w-e-toolbar {
  z-index: 2!important;
}
.w-e-menu{
    z-index: 2 !important;
}
.w-e-text-container{
    z-index: 1 !important;
}
</style>